<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <style>
            * {
                margin: 0;
                padding: 0;
            }
            .box {
                width: 100%;
                height: 400px;
                background-color: red;
                overflow: hidden;
                outline: solid red;
                position: relative;
            }
            .image-box {
                height: 100%;
                display: flex;
                position: absolute;
                overflow: hidden;
            }
            .image-box > .img {
                width: 100vw;
                height: 400px;
                background-repeat: no-repeat;
                background-size: cover;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div id="imageBox" class="image-box">
                <div
                    class="img"
                    style="
                        background-image: url('https://res.vmallres.com/uomcdn/CN/cms/202208/939A7BA43758874C07407A3920F13FDC.jpg');
                    "
                ></div>

                <div
                    class="img"
                    style="
                        background-image: url('https://res.vmallres.com/uomcdn/CN/cms/202208/F32544CE564390531C75101857244E85.jpg');
                    "
                ></div>
                <div
                    class="img"
                    style="
                        background-image: url('https://res.vmallres.com/uomcdn/CN/cms/202208/939A7BA43758874C07407A3920F13FDC.jpg');
                    "
                ></div>
            </div>
        </div>
        <div class="btn-box">
            <button>1</button>
            <button>2</button>
            <button>3</button>
        </div>
        <script>
            const imageBox = document.getElementById("imageBox");
            const allBtns = document.querySelectorAll("button");
            // 获取浏览器宽度
            const boxWidth = window.innerWidth;

            for (let i = 0; i < allBtns.length; ++i) {
                allBtns[i].onclick = function () {
                    imageBox.style.left = -1 * i * boxWidth + "px";
                };
            }
        </script>
    </body>
</html>
